<template>
	<div style="padding:0 37px 0 44px" class="main-container-div">
		<div v-show='mecDialog'>
			<ul class="jigou_ul">
				<li class="jigou_li" v-for="(item,index) in mecList">
					<img class="mecListImg" :src="item.companyLogoUrl" @click="showInfo(index)" />
				</li>
				<li class="last_li" @click='showMecAdd()'></li>
			</ul>
			<el-form>
				<table class="form-table" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
				  	<tbody>
				  		<tr>
				  			<td colspan="6" style="text-align: left;">
				  				<div class="table-head">{{$t('mec.OrganizationInfo')}}</div>
				  			</td>
				  		</tr>
				  		<tr>
					  		<td>{{$t('mec.Name1')}}</td>
					  		<td><input v-model="mecALLData.companyName" type="text" readonly="true"/></td>
					  		<td>{{$t('mec.Contact')}}</td>
					  		<td><input v-model="mecALLData.director" type="text" readonly="true"/></td>
					  	</tr>
					  	<tr>
					  		<td>{{$t('mec.CreationTime')}}</td>
					  		<td><input v-model="mecALLData.added_date" type="text" readonly="true"/></td>
					  		<td>{{$t('mec.Phone')}}</td>
					  		<td><input v-model="mecALLData.phone" type="text" readonly="true"/></td>
					  	</tr>
					  	<tr>
					  		<td>{{$t('mec.Status')}}</td>
					  		<td>
					  			<span v-model="mecALLData.isEnabled" style="font-size: 14px;" class="white-btn mini-btn">{{mecALLData.isEnabled === 'Y' ? this.$t("button.Enabled") : this.$t("button.Suspended")}}</span>
					  			<el-button class="yellow-btn mini-btn" style="font-size: 14px;" @click="stopOrStart()">{{mecALLData.isEnabled === 'Y' ? this.$t("button.Suspended") : this.$t("button.Enabled")}}</el-button>
					  		</td>
					  		<td>{{$t('mec.Detail')}}</td>
					  		<td><el-button class="yellow-btn min-btn" @click='showMecDetails()'>{{$t('button.EnterDetail')}}</el-button></td>
					  	</tr>
				  	</tbody>
				</table>
			</el-form>
		</div>
		<mecAdd v-if='mecDeltailsDialog'  @mecAddChange='mecAddFun' :id="id" :detailsData="detailsData"></mecAdd>
	</div>
</template>

<script>
	import { mecAdd } from 'views/z_mechanism/components';
	import { getMecAll,getMecSingle,mecSave,mecStopOrStart } from 'api/mechanism/index';
  	export default{
  		name: 'mechanism',
  		components: { mecAdd },
  		data(){
  			return {
  				mecList:[],
  				mecDialog:true,
  				mecDeltailsDialog:false,
  				id:null,
  				detailsData:{},
  				getMecListData:{},
  				//绑定机构的数据  后台返回的数据
  				mecALLData:{
  					companyName:undefined,
  					director:undefined,
  					added_date:undefined,
  					phone:undefined,
  					isEnabled:undefined,
  				},
  				mecInfoIndex:0,
  			}
  		},
  		created(){
  			this.getMecList(this.getMecListData);
  		},
  		methods:{
  			showInfo(index){
//				console.log(index);
//				console.log(this.mecList[index]);
  				this.mecALLData = this.mecList[index];
  				this.mecInfoIndex = index;
  			},
  			getMecList(value){
  				getMecAll(value).then(res=>{
  					// console.log(res);
  					this.mecList = res.value;
  					this.mecALLData = this.mecList[this.mecInfoIndex];
  				})
  			},
  			showMecAdd(){
  				this.id = 1,
  				this.mecALLData ={};
  				this.detailsData = this.mecALLData;
  				this.mecDialog = false;
  				this.mecDeltailsDialog = true;
  			},
  			//停用或启用
  			stopOrStart(){
				let msg = this.mecALLData.isEnabled === 'Y' ? this.$t("button.Suspended") : this.$t("button.Enabled");
				this.$msgbox({
			        title: this.$t("hint.Alert"),
			        message: this.$t("hint.SureTo") + msg + this.$t("hint.ThisAgent"),
			        showClose:false,
			        showCancelButton: true,
			        confirmButtonText: this.$t("button.OK"),
			        cancelButtonText: this.$t("button.Cancel"),
		        }).then(()=>{
					this.mecALLData.isEnabled = !this.mecALLData.isEnabled;
		        	mecStopOrStart(this.mecALLData).then(res=>{
		        		this.getMecList(this.getMecListData);
		        		this.mecALLData.isEnabled = this.mecALLData.isEnabled === 'Y' ? 'N' : 'Y';
		        		if(res.code === 0){
		        			this.$notify({
					            title: this.$t("hint.Success"),
					            message: msg + this.$t("hint.Success"),
					            type: 'success',
					            duration: 2000
				         	});
		        		}else{
		        			this.getMecList(this.getMecListData);
		        			this.$notify({
					            title: this.$t("hint.Fail"),
					            message: msg + this.$t("hint.Fail"),
					            type: 'error',
					            duration: 2000
				         	});
		        		}
		        	})
		        })
  			},
  			showMecDetails(){
  				this.id = 2,
  				this.detailsData = this.mecALLData;
  				this.mecDialog = false;
  				this.mecDeltailsDialog = true;
  			},
  			//监听新增机构子组件事件
  			mecAddFun(){
  				this.getMecList(this.getMecListData);
  				this.mecDialog = true;
  				this.mecDeltailsDialog = false;
  			},
  			//监听机构详情子组件事件
		    merDetailsFun(){
		      	
		    },
		      //监听机构修改子组件事件
		    merModifyFun(){
		      	
		    },
		    
  		}
  	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.jigou_ul{
		width: 100%;
		display: flex;
		padding: 0;
		display:-webkit-flex;
		flex-wrap:wrap;
		list-style: none;
		.jigou_li{
			height: 106px;
			width: 106px;
			margin-right: 20px;
			margin-bottom: 20px;
			cursor:pointer;
			.mecListImg{
				height: 106px;
				width: 106px;
			}
		}
		.last_li{
			height: 106px;
			width: 106px;
			background: url('../../../assets/imgs/jiahao.png') no-repeat center;
			background-color:#F2F2F2;
			cursor: pointer;
		}
	}
</style>